@import "../styles/size.less";

#__vconsole {
  --VC-BG-0: #ededed;
  --VC-BG-1: #f7f7f7;
  --VC-BG-2: #fff;
  --VC-BG-3: #f7f7f7;
  --VC-BG-4: #4c4c4c;
  --VC-BG-5: #fff;
  --VC-BG-6: rgba(0, 0, 0, 0.1);
  --VC-FG-0: rgba(0, 0, 0, 0.9);
  --VC-FG-HALF: rgba(0, 0, 0, 0.9);
  --VC-FG-1: rgba(0, 0, 0, 0.5);
  --VC-FG-2: rgba(0, 0, 0, 0.3);
  --VC-FG-3: rgba(0, 0, 0, 0.1);
  --VC-RED: #fa5151;
  --VC-ORANGE: #fa9d3b;
  --VC-YELLOW: #ffc300;
  --VC-GREEN: #91d300;
  --VC-LIGHTGREEN: #95ec69;
  --VC-BRAND: #07c160;
  --VC-BLUE: #10aeff;
  --VC-INDIGO: #1485ee;
  --VC-PURPLE: #6467f0;
  --VC-LINK: #576b95;
  --VC-TEXTGREEN: #06ae56;
  --VC-FG: black;
  --VC-BG: white;
  --VC-BG-COLOR-ACTIVE: #ececec;
  --VC-WARN-BG: overlay(rgba(255, 255, 255, .8), #ffc300);
  --VC-WARN-BORDER: overlay(rgba(255, 255, 255, .6), #ffc300);;
  --VC-ERROR-BG: overlay(rgba(255, 255, 255, .8), #fa5151);
  --VC-ERROR-BORDER: overlay(rgba(255, 255, 255, .6), #fa5151);

  --VC-DOM-TAG-NAME-COLOR: #881280;
  --VC-DOM-ATTRIBUTE-NAME-COLOR: #994500;
  --VC-DOM-ATTRIBUTE-VALUE-COLOR: #1a1aa6;

  --VC-CODE-KEY-FG: #881391;
  --VC-CODE-PRIVATE-KEY-FG: overlay(rgba(255, 255, 255, .6), #881391);
  --VC-CODE-FUNC-FG: #0d22aa;
  --VC-CODE-NUMBER-FG: #1c00cf;
  --VC-CODE-STR-FG: #c41a16;
  --VC-CODE-NULL-FG: #808080;



  color: var(--VC-FG-0);
  font-size: @fontSize;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-user-select: auto;


  /* global */

  .vc-max-height {
    max-height: (250em / @font);
  }
  .vc-max-height-line {
    max-height: (44em / @font);
  }
  .vc-min-height {
    min-height: (40em / @font);
  }

  dd, dl, pre {
    margin: 0;
  }

  /* compoment */

  .vc-switch {
    display: block;
    position: fixed;
    right: (10em / @font);
    bottom: (10em / @font);
    color: #FFF;
    background-color: var(--VC-BRAND);
    line-height: 1;
    font-size: (14em / @font);
    padding: (8em / @font) (16em / @font);
    z-index: 10000;
    border-radius: (4em / @font);
    box-shadow: 0 0 (8em / @font) rgba(0,0,0,0.4);
  }

  .vc-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0, 0);
    z-index: 10001;
    -webkit-transition: background .3s;
    transition: background .3s;
    -webkit-tap-highlight-color: transparent;
    overflow-y: scroll;
  }

  .vc-panel {
    display: none;
    position: fixed;
    min-height: 85%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    background-color: var(--VC-BG-0);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;

    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }

  .vc-tabbar {
    border-bottom: 1px solid var(--VC-FG-3);
    overflow-x: auto;
    height: (39em / @font);
    width: auto;
    white-space: nowrap;

    .vc-tab {
      display: inline-block;
      line-height: (39em / @font);
      padding: 0 (15em / @font);
      border-right: 1px solid var(--VC-FG-3);
      text-decoration: none;
      color: var(--VC-FG-0);
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    .vc-tab:active {
      background-color: rgba(0,0,0,0.15);
    }
    .vc-tab.vc-actived {
      background-color: var(--VC-BG-1);
    }
  }

  .vc-content {
    background-color: var(--VC-BG-2);
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: (40em / @font);
    left: 0;
    right: 0;
    bottom: (40em / @font);
    -webkit-overflow-scrolling: touch;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
  .vc-content.vc-has-topbar {
    top: (71em / @font);
  }

  .vc-topbar {
    background-color: var(--VC-BG-1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;

    .vc-toptab {
      display: none;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      line-height: (30em / @font);
      padding: 0 (15em / @font);
      border-bottom: 1px solid var(--VC-FG-3);
      text-decoration: none;
      text-align: center;
      color: var(--VC-FG-0);
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    .vc-toptab.vc-toggle {
      display: block;
    }
    .vc-toptab:active {
      background-color: rgba(0,0,0,0.15);
    }
    .vc-toptab.vc-actived {
      border-bottom: 1px solid var(--VC-INDIGO);
    }
  }

  .vc-logbox {
    display: none;
    position: relative;
    min-height: 100%;

    i {
      font-style: normal;
    }

    .vc-log {
      padding-bottom: (39em / @font) * 2;
      -webkit-tap-highlight-color: transparent;
    }

    .vc-log:empty:before {
      content: "Empty";
      color: var(--VC-FG-1);
      position: absolute;
      top: 45%;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: (15em / @font);
      text-align: center;
    }

    .vc-item {
      margin: 0;
      padding: (6em / @font) (8em / @font);
      overflow: hidden;
      line-height: 1.3;
      border-bottom: 1px solid var(--VC-FG-3);
      word-break: break-word;
    }
    .vc-item-info {
      color: var(--VC-PURPLE);
    }
    .vc-item-debug {
      color: var(--VC-YELLOW);
    }
    .vc-item-warn {
      color: var(--VC-ORANGE);
      border-color: var(--VC-WARN-BORDER);
      background-color: var(--VC-WARN-BG);
    }
    .vc-item-error {
      color: var(--VC-RED);
      border-color: var(--VC-ERROR-BORDER);
      background-color: var(--VC-ERROR-BG);
    }

    .vc-log.vc-log-partly .vc-item {
      display: none;
    }
    .vc-log.vc-log-partly-log .vc-item-log,
    .vc-log.vc-log-partly-info .vc-item-info,
    .vc-log.vc-log-partly-warn .vc-item-warn,
    .vc-log.vc-log-partly-error .vc-item-error {
      display: block;
    }

    .vc-item {
      &.hide{
        display: none !important;
      }
      .vc-item-content {
        margin-right: (60em / @font);
        // display: inline-block;
      }
      i {
        white-space: pre-line;
      }

      .vc-item-repeat {
        // display: inline-block;
        float: left;
        margin-right: (4em / @font);
        padding: 0 (@fontSize / 2);
        color: #D7E0EF;
        background-color: #42597F;
        border-radius: (@fontSize / 1.5);
      }
    }

    .vc-item.vc-item-error .vc-item-repeat {
      color: #901818;
      background-color: var(--VC-RED);
    }
    .vc-item.vc-item-warn .vc-item-repeat {
      color: #987D20;
      background-color: #F4BD02;
    }

    .vc-item .vc-item-code {
      display: block;
      white-space: pre-wrap;
      overflow: auto;
      position: relative;
    }
    .vc-item .vc-item-code.vc-item-code-input,
    .vc-item .vc-item-code.vc-item-code-output {
      padding-left: (12em / @font);
    }
    .vc-item .vc-item-code.vc-item-code-input:before,
    .vc-item .vc-item-code.vc-item-code-output:before {
      content: "›";
      position: absolute;
      top: (-3em / @font);
      left: 0;
      font-size: (16em / @font);
      color: #6A5ACD;
    }
    .vc-item .vc-item-code.vc-item-code-output:before {
      content: "‹";
    }

    .vc-item .vc-fold {
      display: block;
      overflow: auto;
      -webkit-overflow-scrolling: touch;

      .vc-fold-outer {
        display: block;
        font-style: italic;
        padding-left: (10em / @font);
        position: relative;
      }
      .vc-fold-outer:active {
        background-color: var(--VC-BG-COLOR-ACTIVE);
      }

      .vc-fold-outer:before {
        content: "";
        position: absolute;
        top: (4em / @font);
        left: (2em / @font);
        width: 0;
        height: 0;
        border: transparent solid (4em / @font);
        border-left-color: var(--VC-FG-1);
      }
      .vc-fold-outer.vc-toggle:before {
        top: (6em / @font);
        left: 0;
        border-top-color: var(--VC-FG-1);
        border-left-color: transparent;
      }

      .vc-fold-inner {
        display: none;
        margin-left: (10em / @font);
      }
      .vc-fold-inner.vc-toggle {
        display: block;
      }

      .vc-fold-inner .vc-code-key {
        margin-left: (10em / @font);
      }
      .vc-fold-outer .vc-code-key {
        margin-left: 0;
      }
    }

    .vc-item-copy {
      float: right;
      word-break: normal;
      white-space: normal;
      width: 16px;
      height: 16px;

      .vc-icon-clippy {
        display: block;
        fill: var(--VC-FG-2);
        width: 16px;
        height: 16px;
      }
      .vc-icon-check {
        display: none;
        fill: var(--VC-TEXTGREEN);
        width: 16px;
        height: 16px;
      }
    }
    .vc-item-copy-success {
      .vc-icon-clippy {
        display: none;
      }
      .vc-icon-check {
        display: block;
      }
    }

    .vc-item-delete {
      float: right;
      word-break: normal;
      white-space: normal;
      margin-left: 4px;
      width: 16px;
      height: 16px;

      .vc-icon-delete {
        fill: var(--VC-FG-2);
        width: 16px;
        height: 16px;
      }
    }

    .vc-item-tips {
      background-color: var(--VC-BG-6);
      color: var(--VC-FG-0);
      font-size: (11em / @font);
      padding: 2px 4px;
      border-radius: 4px;
    }

    .vc-code-key {
      color: var(--VC-CODE-KEY-FG);
    }
    .vc-code-private-key {
      color: var(--VC-CODE-PRIVATE-KEY-FG);
    }
    .vc-code-function {
      color: var(--VC-CODE-FUNC-FG);
      font-style: italic;
    }
    .vc-code-number,
    .vc-code-boolean {
      color: var(--VC-CODE-NUMBER-FG);
    }
    .vc-code-string {
      color: var(--VC-CODE-STR-FG);
      white-space: normal;
    }
    .vc-code-null,
    .vc-code-undefined {
      color: var(--VC-CODE-NULL-FG);
    }

    .vc-cmd {
      position: absolute;
      height: (40em / @font);
      left: 0;
      right: 0;
      bottom: (40em / @font);
      border-top: 1px solid var(--VC-FG-3);
      display: block!important;
      &.vc-filter{
        bottom: 0;
      }

      .vc-cmd-input-wrap {
        display: block;
        height: (28em / @font);
        margin-right: (40em / @font);
        padding: (6em / @font) (8em / @font);
      }

      .vc-cmd-input {
        width: 100%;
        border: none;
        resize: none;
        outline: none;
        padding: 0;
        font-size: (12em / @font);
        background-color: transparent;
        color: var(--VC-FG-0);
      }
      .vc-cmd-input::-webkit-input-placeholder {
        line-height: (28em / @font);
      }

      .vc-cmd-btn {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: (40em / @font);
        border: none;
        background-color: var(--VC-BG-0);
        color: var(--VC-FG-0);
        outline: none;
        -webkit-touch-callout: none;
        font-size: 1em;
      }
      .vc-cmd-btn:active {
        background-color: rgba(0,0,0,0.15);
      }

      .vc-cmd-prompted {
        position: fixed;
        width: 100%;
        background-color: var(--VC-BG-3);
        border: 1px solid var(--VC-FG-3);
        overflow-x: scroll;
        display: none;
      }
      .vc-cmd-prompted li {
        list-style: none;
        line-height: 30px;
        padding: 0 (6em / @font);
        border-bottom: 1px solid var(--VC-FG-3);
      }
    }

    .vc-group {

      .vc-group-preview {
        -webkit-touch-callout: none;
      }
      .vc-group-preview:active {
        background-color: var(--VC-BG-COLOR-ACTIVE);
      }

      .vc-group-detail {
        display: none;
        padding: 0 0 (10em / @font) (20em / @font);
        border-bottom: 1px solid var(--VC-FG-3);
      }

    }

    .vc-group.vc-actived {

      .vc-group-detail {
        display: block;
        background-color: var(--VC-BG-1);
      }

      .vc-table-row {
        background-color: var(--VC-BG-2);
      }

      .vc-group-preview {
        background-color: var(--VC-BG-1);
      }
    }

    .vc-table {

      .vc-table-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        overflow: hidden;
        border-bottom: 1px solid var(--VC-FG-3);
      }
      .vc-table-row.vc-left-border {
        border-left: 1px solid var(--VC-FG-3);
      }

      .vc-table-col {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: (3em / @font) (4em / @font);
        border-left: 1px solid var(--VC-FG-3);
        overflow: auto;
      }
      .vc-table-col:first-child {
        border: none;
      }

      .vc-table-col-value {
        white-space: pre-wrap;
        word-break: break-word;
        /*white-space: nowrap;
        text-overflow: ellipsis;*/
        -webkit-overflow-scrolling: touch;
      }

      .vc-small .vc-table-col {
        padding: 0 (4em / @font);
        font-size: (12em / @font);
      }

      .vc-table-col-2 {
        -webkit-box-flex: 2;
        -webkit-flex: 2;
        -moz-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
      }
      .vc-table-col-3 {
        -webkit-box-flex: 3;
        -webkit-flex: 3;
        -moz-box-flex: 3;
        -ms-flex: 3;
        flex: 3;
      }
      .vc-table-col-4 {
        -webkit-box-flex: 4;
        -webkit-flex: 4;
        -moz-box-flex: 4;
        -ms-flex: 4;
        flex: 4;
      }
      .vc-table-col-5 {
        -webkit-box-flex: 5;
        -webkit-flex: 5;
        -moz-box-flex: 5;
        -ms-flex: 5;
        flex: 5;
      }
      .vc-table-col-6 {
        -webkit-box-flex: 6;
        -webkit-flex: 6;
        -moz-box-flex: 6;
        -ms-flex: 6;
        flex: 6;
      }

      .vc-table-row-error {
        border-color: var(--VC-ERROR-BORDER);
        background-color: var(--VC-ERROR-BG);

        .vc-table-col {
          color: var(--VC-RED);
          border-color: var(--VC-ERROR-BORDER);
        }
      }

      .vc-table-col-title {
        font-weight: bold;
      }
    }

  }

  .vc-logbox.vc-actived {
    display: block;
  }

  .vc-toolbar {
    border-top: 1px solid var(--VC-FG-3);
    line-height: (39em / @font);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    .vc-tool {
      display: none;
      text-decoration: none;
      color: var(--VC-FG-0);
      width: 50%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      text-align: center;
      position: relative;
      -webkit-touch-callout: none;
    }
    .vc-tool.vc-toggle,
    .vc-tool.vc-global-tool {
      display: block;
    }

    .vc-tool:active {
      background-color: rgba(0,0,0,0.15);
    }
    .vc-tool:after {
      content: " ";
      position: absolute;
      top: (7em / @font);
      bottom: (7em / @font);
      right: 0;
      border-left: 1px solid var(--VC-FG-3);
    }

    .vc-tool-last:after {
      border: none;
    }
  }
  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .vc-toolbar,
    .vc-switch {
      bottom: constant(safe-area-inset-bottom);
      bottom: env(safe-area-inset-bottom);
    }
  }

}

#__vconsole.vc-toggle {

  .vc-switch {
    display: none;
  }

  .vc-mask {
    background: rgba(0, 0, 0, 0.6);
    display: block;
  }

  .vc-panel {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@media (prefers-color-scheme: dark) {
  #__vconsole:not([data-theme="light"]) {
      --VC-BG-0: #191919;
      --VC-BG-1: #1f1f1f;
      --VC-BG-2: #232323;
      --VC-BG-3: #2f2f2f;
      --VC-BG-4: #606060;
      --VC-BG-5: #2c2c2c;
      --VC-BG-6: rgba(255, 255, 255, 0.2);
      --VC-FG-0: rgba(255, 255, 255, 0.8);
      --VC-FG-HALF: rgba(255, 255, 255, 0.6);
      --VC-FG-1: rgba(255, 255, 255, 0.5);
      --VC-FG-2: rgba(255, 255, 255, 0.3);
      --VC-FG-3: rgba(255, 255, 255, 0.05);
      --VC-RED: #fa5151;
      --VC-ORANGE: #c87d2f;
      --VC-YELLOW: #cc9c00;
      --VC-GREEN: #74a800;
      --VC-LIGHTGREEN: #28b561;
      --VC-BRAND: #07c160;
      --VC-BLUE: #10aeff;
      --VC-INDIGO: #1196ff;
      --VC-PURPLE: #8183ff;
      --VC-LINK: #7d90a9;
      --VC-TEXTGREEN: #259c5c;
      --VC-FG: white;
      --VC-BG: black;
      --VC-BG-COLOR-ACTIVE: #282828;
      --VC-WARN-BG: overlay(rgba(0, 0, 0, .8), #ffc300);
      --VC-WARN-BORDER: overlay(rgba(0, 0, 0, .6), #ffc300);
      --VC-ERROR-BG: overlay(rgba(0, 0, 0, .8), #fa5151);
      --VC-ERROR-BORDER: overlay(rgba(0, 0, 0, .6), #fa5151);

      --VC-DOM-TAG-NAME-COLOR: #5DB0D7;
      --VC-DOM-ATTRIBUTE-NAME-COLOR: #9BBBDC;
      --VC-DOM-ATTRIBUTE-VALUE-COLOR: #f29766;

      --VC-CODE-KEY-FG: #e36eec;
      --VC-CODE-PRIVATE-KEY-FG: overlay(rgba(255, 255, 255, .6), #e36eec);
      --VC-CODE-FUNC-FG: #556af2;
      --VC-CODE-NUMBER-FG: #9980ff;
      --VC-CODE-STR-FG: #e93f3b;
      --VC-CODE-NULL-FG: #808080;
  }
}

#__vconsole[data-theme="dark"] {
  --VC-BG-0: #191919;
  --VC-BG-1: #1f1f1f;
  --VC-BG-2: #232323;
  --VC-BG-3: #2f2f2f;
  --VC-BG-4: #606060;
  --VC-BG-5: #2c2c2c;
  --VC-BG-6: rgba(255, 255, 255, 0.2);
  --VC-FG-0: rgba(255, 255, 255, 0.8);
  --VC-FG-HALF: rgba(255, 255, 255, 0.6);
  --VC-FG-1: rgba(255, 255, 255, 0.5);
  --VC-FG-2: rgba(255, 255, 255, 0.3);
  --VC-FG-3: rgba(255, 255, 255, 0.05);
  --VC-RED: #fa5151;
  --VC-ORANGE: #c87d2f;
  --VC-YELLOW: #cc9c00;
  --VC-GREEN: #74a800;
  --VC-LIGHTGREEN: #28b561;
  --VC-BRAND: #07c160;
  --VC-BLUE: #10aeff;
  --VC-INDIGO: #1196ff;
  --VC-PURPLE: #8183ff;
  --VC-LINK: #7d90a9;
  --VC-TEXTGREEN: #259c5c;
  --VC-FG: white;
  --VC-BG: black;
  --VC-BG-COLOR-ACTIVE: #282828;
  --VC-WARN-BG: overlay(rgba(0, 0, 0, .8), #ffc300);
  --VC-WARN-BORDER: overlay(rgba(0, 0, 0, .6), #ffc300);
  --VC-ERROR-BG: overlay(rgba(0, 0, 0, .8), #fa5151);
  --VC-ERROR-BORDER: overlay(rgba(0, 0, 0, .6), #fa5151);

  --VC-DOM-TAG-NAME-COLOR: #5DB0D7;
  --VC-DOM-ATTRIBUTE-NAME-COLOR: #9BBBDC;
  --VC-DOM-ATTRIBUTE-VALUE-COLOR: #f29766;

  --VC-CODE-KEY-FG: #e36eec;
  --VC-CODE-PRIVATE-KEY-FG: overlay(rgba(255, 255, 255, .6), #e36eec);
  --VC-CODE-FUNC-FG: #556af2;
  --VC-CODE-NUMBER-FG: #9980ff;
  --VC-CODE-STR-FG: #e93f3b;
  --VC-CODE-NULL-FG: #808080;
}